/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */


import React, { useState, useEffect } from 'react';
import type { PropsWithChildren } from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import {
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { navigationRef } from './src/navigation/navigationRef';

// 修改导入路径
import Login from './src/views/Login/Login'
import Face from './src/views/Login/Face'
import Main from './src/views/Main/Main'
import Live from './src/views/Live-Streaming/Live-Streaming'
import Live_Open from './src/views/Live-Streaming/Live-open'
import Watch from './src/views/Live-Streaming/Watch'
import Ai from './src/views/Ai/Ai'
import Chat from './src/views/Chat/Chat'
import Me from './src/views/Me/Me'
import Upload from './src/views/Main/Upload'
import FaceLR from './src/views/Login/Face-LR'
import Phone from './src/views/Login/Phone'
import EbRTCVideo from './src/views/Chat/components/EbRTCVideo'
import {
  Colors,
  DebugInstructions,
  Header,
  LearnMoreLinks,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

type SectionProps = PropsWithChildren<{
  title: string;
}>;

function Section({ children, title }: SectionProps): React.JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';
  return (
    <View style={styles.sectionContainer}>
      <Text
        style={[
          styles.sectionTitle,
          {
            color: isDarkMode ? Colors.white : Colors.black,
          },
        ]}>
        {title}
      </Text>
      <Text
        style={[
          styles.sectionDescription,
          {
            color: isDarkMode ? Colors.light : Colors.dark,
          },
        ]}>
        {children}
      </Text>
    </View>
  );
}

const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();

const TabNavigator = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Main" component={Main} options={{ headerShown: false }} />
      <Tab.Screen name="Live" component={Live} options={{ headerShown: false }} />
      <Tab.Screen name="Ai" component={Ai} options={{ headerShown: false }} />
      <Tab.Screen name="Chat" component={Chat} options={{ headerShown: false }} />
      <Tab.Screen name="Me" component={Me} options={{ headerShown: false }} />
      <Stack.Screen name="EbRTCVideo" component={EbRTCVideo} options={{ headerShown: false }} />

    </Tab.Navigator>
  );
};


const App = () => {

  return (
    // <Text>123</Text>
    <NavigationContainer ref={navigationRef}>
      <Stack.Navigator>
        <Stack.Screen name="Login" component={Login} options={{ headerShown: false }} />
        <Stack.Screen name="Upload" component={Upload} options={{ headerShown: false }} />
        <Stack.Screen name="MeTab" component={TabNavigator} options={{ headerShown: false }} />
        <Stack.Screen name="Live_Open" component={Live_Open} options={{ headerShown: false }} />
        <Stack.Screen name="Watch" component={Watch} options={{ headerShown: false }} />
        <Stack.Screen name="Face" component={Face} options={{ headerShown: false }} />
        <Stack.Screen name="FaceLR" component={FaceLR} options={{ headerShown: false }} />
        <Stack.Screen name="Phone" component={Phone} options={{ headerShown: false }} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

const styles = StyleSheet.create({
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
  },
  highlight: {
    fontWeight: '700',
  },
});

export default App;
